import { defineComponent, inject } from 'vue'
import {
  DESIGNER_LAYOUT_SYMBOL,
  GlobalRegistry,
  IDesignerAppConfig,
} from '../../core'
import * as icons from '../icons'
import { IconWidget } from '../widgets'

export const Test = defineComponent({
  setup() {
    const context = inject(DESIGNER_LAYOUT_SYMBOL, {} as IDesignerAppConfig)
    const handleClick = () => {
      GlobalRegistry.setDesignerLayout('dark')
    }
    const handleColor = () => {
      GlobalRegistry.getDesignerAppConfig().fontColor = '#f00'
      GlobalRegistry.getDesignerAppConfig().iconFill = '#000'
    }
    return () => (
      <div>
        <h2>{context.appTheme}</h2>
        <h2>{context.prefixCls}</h2>
        <button onClick={handleClick}>修改主题</button>
        {<icons.AddFocus />}
        {<icons.Config></icons.Config>}
        <button onClick={handleColor}>修改主题</button>
        <IconWidget infer="Config"></IconWidget>
        <IconWidget infer="Abno"></IconWidget>
        <IconWidget infer="Bug"></IconWidget>
      </div>
    )
  },
})
